<template>
    <div class="calendar-list">
    <div class="list-header">
      <span>一</span>
      <span>二</span>
      <span>三</span>
      <span>四</span>
      <span>五</span>
      <span>六</span>
      <span>日</span>
    </div>
    <div class="list-body">
      <!-- <span class="off">29</span>
      <span class="off">30</span>
      <span>1</span>
      <span class="active">2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span> -->
      <span v-for="list in lists" :class="styleObj(list)" @click="handleClick(list)">{{ list.date }}</span>
      
    </div>
  </div>
</template>

<script setup>
import {storeToRefs} from 'pinia'
import {useCalendarStore}from "@/stores/calendar.js";

const {lists,date}=storeToRefs(useCalendarStore())
const { prevMonth, nextMonth } = useCalendarStore()
const styleObj=(item)=>{
    return {
        // 非本月
        off:item.type!=='this',
        // 本月
        active:item.type==='this'&&item.date===date.value
    }
}

const handleClick=(item)=>{
    if(item.type==='last'){
        prevMonth()
    }else if(item.type==='next'){
        nextMonth()
    }
    date.value=item.date
}
</script>

<style lang="scss" scoped>
.calendar-list{
    padding: 0 20px;
    // height: 400px;
    background-color: #fff;
    .list-header{
        display: flex;
        gap: 20px;
        span{
            flex: 1;
            padding: 10px 0;
            text-align: center;
            font-size: 14px;
            color: #333;
            cursor: default;
            &:nth-child(6),
            &:nth-child(7){
                color: #f11;
            }
        }
    }
    .list-body{
        display: grid;
        grid-template-columns: repeat(7,1fr);
        grid-template-rows: repeat(6,1fr);
        gap: 20px;
        span{
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 9px;
            font-size: 24px;
            font-weight: bold;
            border-radius: 12px;
            cursor: pointer;
            &:nth-child(7n+6),
            &:nth-child(7n){
                color: #f11;
            }
            &.off{
                opacity: 0.3;
            }
            &.active{
                border: 2px solid rgb(153, 65, 236);
            }
            &:hover{
                background: rgba(78,110,242,0.1);
            }
        }
    }
}
</style>